<template>
    <div>
        <div>
            <el-card class="box-card">
                <div id="saleECharts" style="width: 100%; height: 700px;"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
    var that = this;
    export default {
        name: "kechengtj",
        data(){
            return {
                saleECharts: '',
                year:'',
            }
        },
        created() {
            this.initsaleECharts();
            console.log("1")
        },
        methods: {

            initsaleECharts() {
                if (this.year === '')
                    this.year = new Date().getFullYear();
                const that = this;
                // 新建一个promise对象
                let newPromise = new Promise((resolve) => {
                    resolve()
                })
                //然后异步执行echarts的初始化函数
                newPromise.then(() => {
                    //	此dom为echarts图标展示dom
                    this.saleECharts = this.$echarts.init(document.getElementById('saleECharts'));
                    this.$http.get(`/eCharts/toUserRentStatManage/${this.year}`).then(function (resp) {

                        if (resp.data.code===200) {
                            var option = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '4%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: resp.data.result.allName,
                                        axisTick: {
                                            alignWithLabel: true
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value'
                                    }
                                ],
                                series: [
                                    {
                                        name: '课程销售量',
                                        type: 'bar',
                                        barWidth: '60%',
                                        data: resp.data.result.allSale,
                                    }
                                ]
                            };
                            that.saleECharts.setOption(option);
                        }
                    });

                })
            }
        }
    }
</script>

<style scoped>

</style>